<template>
  <div class="gd">
    <van-nav-bar
      title="确认账单"
      left-arrow
      @click-left="onClickLeft"
    />
    <div>
      <h2><span style="font-size: 28px"><span style="font-size: 20px;color: red">￥</span>{{ money }}</span><br></h2>
      <span style="color: gray">行程产生的高速、路桥、停车费全部给车主</span>
    </div>
    <van-form v-model="form" @submit="onSubmit">
      <van-field v-model="form.highwayFee" label="高速费" style="line-height: 80px;height: 80px"/>
      <van-field v-model="form.bridgeFee" label="路桥费" style="line-height: 80px;height: 80px"/>
      <van-field v-model="form.parkingFee" label="停车费" style="line-height: 80px;height: 80px"/>
      <van-field v-model="form.additionalFee" label="附加费" style="line-height: 80px;height: 80px"/>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" @click="tj">提交</van-button>
      </div>
    </van-form>
  </div>
</template>
<script>

export default {
  data() {
    return {
      form: {},
      // 高速费
      highwayFee: null,
      // 路桥费
      bridgeFee: null,
      // 停车费
      parkingFee: null,
      // 附加费
      additionalFee: null,
      // 司机订单费用
      money: null,
      // 总公里数
      driverLong: null,
    };
  },
  created() {
    if (this.$route.query.orderId) {
      this.form.orderId = this.$route.query.orderId;
      this.driverLong = this.$route.query.driverLong;
    }
    this.getMoney();
  },
  methods: {
    tj() {
      this.$router.push('/endOrder')
    },
    getMoney() {
      getOrderCost(this.form.orderId).then(res => {
        this.money = res.orderCost.orderMoney
      })
    },
    onClickLeft() {
      this.$router.push('/destination');
    },
    onSubmit() {
      billsOfCharge(this.form).then(res => {
        console.log(res)
        this.routePush();
      })
    },
    routePush() {
      this.$router.push({
        path: '/EndOrder',
        query: {
          orderId: this.form.orderId,
          driverLong: this.driverLong
        }
      })
    },
  }
}
</script>
<style scoped>
.gd {
  width: 400px;
  height: 700px;
}
</style>
